<link rel='stylesheet' type='text/css' href="css/ctrl/movectrl.css" />
<link rel="stylesheet" type='text/css' href="css/jui/jquery-ui-1.8.11.custom.css" />
<style>
	#experiment {
	  -webkit-perspective: 800; 
	  -webkit-perspective-origin: 50% 200px;
	
	  -moz-perspective: 800; 
	  -moz-perspective-origin: 50% 200px;
	}

	#cube {
	  position: relative;
	  margin: 10px auto 0;
	  height: 40px;
	  width: 40px;
	  -webkit-transition: -webkit-transform 2s linear;
	  -webkit-transform-style: preserve-3d;
	
	  -moz-transition: -moz-transform 2s linear;
	  -moz-transform-style: preserve-3d;
	}

	.face {
	  position: absolute;
	  height: 36px;
	  width: 36px;
	  padding: 2px;
	  background-color:#C0C0C0;
	  font-size: 27px;
	  line-height: 1em;
	  color: #fff;
	  border: 1px solid #555;
	  border-radius: 3px;
	}   

	#cube .one  {
	  -webkit-transform: rotateX(90deg) translateZ(20px);
	  -moz-transform: rotateX(90deg) translateZ(20px);
	}

	#cube .two {
	  -webkit-transform: translateZ(20px);
	  -moz-transform: translateZ(20px);
	}

	#cube .three {
	  -webkit-transform: rotateY(90deg) translateZ(20px);
	  -moz-transform: rotateY(90deg) translateZ(20px);
	}

	#cube .four {
	  -webkit-transform: rotateY(180deg) translateZ(20px);
	  -moz-transform: rotateY(180deg) translateZ(20px);
	}

	#cube .five {
	  -webkit-transform: rotateY(-90deg) translateZ(20px);
	  -moz-transform: rotateY(-90deg) translateZ(20px);
	}

	#cube .six {
	  -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(20px);
	  -moz-transform: rotateX(-90deg) rotate(180deg) translateZ(20px);
	}
</style>

  <script src="js/jquery/jquery.ui.core.js"></script>
  <script src="js/jquery/jquery.ui.widget.js"></script>
  <script src="js/jquery/jquery.ui.mouse.js"></script>
  <script src="js/jquery/jquery.ui.slider.js"></script>

<script>
		
$(function(){

});

</script>

<div unselectable="on" class=" BMap_stdMpCtrl" style="width: 62px; height: 400px; position: absolute; z-index: 1100; bottom: auto; right: auto; top: 60px; left: 90%; ">

<div id="experiment">	
	<div id="cube">
        <div class="face one" title='上' id='faceUp'>
			上
        </div>
        <div class="face two" title='后' id='faceBack'>
			后
        </div>
        <div class="face three" title='右' id='faceRight'>
			右
		</div>
        <div class="face four" title='前' id='faceFront'>
			前
        </div>
        <div class="face five" title='左' id='faceLeft'>
			左
        </div>
        <div class="face six" title='下' id='faceDown'>
        	下
        </div>
    </div>	
</div>
<div class="BMap_stdMpCtrl">
  <div class="BMap_stdMpPan" style="background-position: 0px 0px;  top:60px;">
    <div class="BMap_button Move_f" title="向上平移"></div>
    <div class="BMap_button Move_l" title="向左平移"></div>
    <div class="BMap_button Move_r" title="向右平移"></div>
    <div class="BMap_button Move_b" title="向下平移"></div>
  </div>
  
  <div class="BMap_stdMpPan" style="background-position: 0px 0px;  top:110px;">
    <div class="BMap_button Look_u" title="向上看"></div>
    <div class="BMap_button Look_l" title="向左看"></div>
    <div class="BMap_button Look_r" title="向右看"></div>
    <div class="BMap_button Look_d" title="向下看"></div>
  </div>
 </div> 
  <div class="rotate" style="background-position: 0px 0px;  top:160px;">
    <div class="rotate_l" title="顺时针旋转">
      <img src="images/ctrl/button-rotate-cw.png"/>
    </div>
  </div>

  <div class="rotate"  style="background-position: 0px 0px;  top:210px; ">
    <div class="rotate_r" title="逆时针旋转">
      <img src="images/ctrl/button-rotate-ccw.png"/>
    </div>
  </div>

      
<div id="slider-vertical" style="height:200px; top:260px;left:15px"></div>
</div>

